<template>
  <div class="xuanyngren" >
    <statistic-query-form ref="queryForm"
                          @doQuery="getList"
                          :data-uri="'/kh/statistic/scoreInfo/'"
                          :pattern="2"
                          :dept-type="1"
                          :export-uri="'/kh/statistic/scoreInfoExport/'"
    ></statistic-query-form>
    <p class="titlepyb">
      <b>{{formdata.programmeName}}</b>
    </p>
    <row class="titlename">
      <div class="divname">
        <div> <b>企业名称：{{formdata.assessItemName}}</b></div>
        <div> <b> 评议时间：{{formdata.time}}</b></div>
      </div>
    </row>
    <row class="titlename">
      <div class="divbody">
        <!--        第一部分-->
        <div v-show="item.indexType=='0'" class="pingjia" v-for="item in formdata.assessRules">
          <div class="pjtitle">{{item.indexName}}</div>
          <div class="xuanxiang" >
            <div v-for="row in item.options">
              <div class="radioxz">
                <span>{{row.optionName}}</span>
                <span>{{row.value}}</span>
              </div>
            </div>
          </div>
        </div>
        <!--        第二部分-->
        <div class="zhongjian"  v-show="item.indexType=='1'" v-for="item in formdata.assessRules">
          <div class="titletwo">
            {{item.indexName}}
          </div>
          <div>
            <ul v-for="row in item.options">
              <li >
                <el-checkbox disabled v-show="row.other==false" v-model="row.value" >{{row.optionName}}</el-checkbox>

                <span v-show="row.other==true">
                  <el-checkbox disabled v-model="row.value" @change="checkedBtn(row)"></el-checkbox>
                  <span class="qita">其他</span>
                  <input disabled type="text" class="inputsr" v-model="row.otherText" :disabled="!row.value">
                  <span>（如选此项，请填写具体内容）</span>
                </span>

              </li>
            </ul>
          </div>
        </div>
        <!--第三部分数据-->
        <div class="bottom" v-show="item.indexType=='2'" v-for="item in formdata.assessRules">
          <div >
            {{item.indexName}}
          </div>
          <textarea disabled  maxlength="300" v-model="item.value" name="11" id="" cols="30" rows="10" ></textarea>
        </div>

      </div>
    </row>




  </div>
</template>

<script>
  import request from '@/utils/request'
  import StatisticQueryForm from '../components/StatisticQueryForm'
  export default {
    name: "home",
    data() {
      return {
        //总数居
        formdata:{
          programmeName:'选人用人民主评议表',
          assessItemName:'是多少',
          time:'',
          assessRules:[],
        },
        textarea:'',
        radiomy:false,//满意
        //第二部分数据
        twoData:{
          title:' 5，你认为本单位有啥问题吗？（可多选）',
          duoxuanArr:[
            {checked:false,name:'(1)发挥规范化',shuru:'2'},
            {checked:false,name:'(2)发挥规范化',shuru:'2'},
            {checked:false,name:'(3)发挥规范化',shuru:'1',model:''},
          ]
        },
        //第一部分数据
        tabelList:[
          {
            titleName:'1,对本单位选人用人工作的总评价',
            model:'danwei',
            caozuoArr:[
              {label:'1',name:'满意'},
              {label:'2',name:'基本满意'},
              {label:'3',name:'不满意'},
              {label:'4',name:'不了解'},
            ]
          },
          {
            titleName:'2,对本单执行徐娜用人大苏打',
            model:'zhixing',
            caozuoArr:[
              {label:'1',name:'满意2'},
              {label:'2',name:'基本满意2'},
              {label:'3',name:'不满意2'},
              {label:'4',name:'不了解2'},
            ]
          },
        ],

      };
    },
    components:{
      'StatisticQueryForm': StatisticQueryForm
    },
    created() {

    },
    methods: {


      getTime:function(){
        var date = new Date();
        var nian=date.getFullYear(); //获取完整的年份(4位)
        var yue =date.getMonth()+1; //获取当前月份(0-11,0代表1月)
        var ri = date.getDate(); //获取当前日(1-31)
        if(yue<9){
          yue = "0"+yue
        }
        if(ri<9){
          ri = "0"+ri
        }
        this.formdata.time = nian+'年'+yue+'月'+ri+'日'
      },
      //获取列表数据
      getList:function(obj) {
        this.spanArr=[]
        request({
          url: obj.url,
          method: 'get',
        }).then(response => {
          this.formdata = response.data
          this.getTime()
        });
      },

      //文本域监听
      textareaBtn:function(row){
        console.log('文本域',row)
      },
      //多选框监听
      checkedBtn:function(row){
        console.log('其他复选框',row)
      },
      //单选框监听
      jianting:function(row) {
        console.log(row)

      },
    }
  };
</script>

<style  lang="scss">
  .divbody {
    width: 800px;
    border: 1px solid #cccccc;
    .pingjia {
      width: 100%;
      div {
        height: 36px;
        line-height: 36px;
      }
      .pjtitle {
        border-top:1px solid #cccccc;
        padding-left: 10px;
      }
      .xuanxiang {

        display: flex;
        justify-content: space-around;
        border-top: 1px solid #cccccc;
        div {
          width: 100%;
          text-align: center;
        }
        .radioxz{
          border-right: 1px solid #cccccc;
          display: flex;
          justify-content: space-around;
          align-items: center;
        }
      }
    }
  }
  .zhongjian {
    width: 100%;
    border-top:1px solid #cccccc;
    .titletwo {
      height: 30px;
      line-height: 30px;
      padding-left: 10px;
    }
    ul {
      margin: 0;
      padding: 0;


    }
    li {
      height: 25px;
      line-height: 25px;
      font-size: 14px;
      padding-left: 33px;
      list-style:none;
      color: #606266;
    }
    .inputsr {
      border: none;
      border-bottom:1px solid black;
      margin-left: 5px;
      outline:none
    }
    .qita {
      margin-left: 13px;
    }
  }
  .bottom {
    padding-left: 10px;
    width: 100%;
    border-top:1px solid #cccccc;
    div {
      height: 36px;
      line-height: 36px;
    }
    textarea {
      border: none;
      width: 100%;
      outline:none;
    }
  }




  .xuanyngren{
    font-family:'SimSun';
    margin-bottom: 50px;
  }
  .xuanyngren .top {
    width: 100%;
    height: 200px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .titlepyb {
    margin-top: 20px;
    font-size: 25px;
    text-align: center;
  }
  .xuanyngren .titlename {
    width: 100%;
    display: flex;
    justify-content: center;

  }
  .divname {
    width: 800px;
    height: 36px;
    /*background: #cccccc;*/
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .table {
    width: 800px;
    td{
      height: 36px;
    }
    tr{
      width: 100%;
    }
  }
  .biaoti {
    padding-left: 10px;
  }
  .tdxuanxiang {
    /*width: 12.5%;*/
    text-align: center;
  }

</style>
